<template>
	<!-- 写文章 -->
	<view class="container" :style="{'height': 'calc(100vh - '+calcheight+'px)'}">
		<input name="username" type="text" v-model="inputValue" class="input-title" placeholder="请输入标题(4-40个字)" />
		<editor id="editor" placeholder="说两句呗~~" :content="content" @ready="onEditorReady" @change="onEditorChange">
		</editor>
		<view class="view-select">
			<!-- 插入图片 -->
			<button class="button-selectImg" @tap="chooseImg">
				<image class="image-selectImg" src="../../../static/selectImg.png"></image>
			</button>
			<!-- 加粗 -->
			<button class="button-selectImg" @tap="boldface">
				<image class="image-selectImg" src="../../../static/bold.png"></image>
			</button>
			<!-- 一级标题 -->
			<button class="button-selectImg" @tap="setHeader('H1')">
				<image class="image-selectImg" src="../../../static/title-1.png"></image>
			</button>
			<!-- 二级标题 -->
			<button class="button-selectImg" @tap="setHeader('H2')">
				<image class="image-selectImg" src="../../../static/title-2.png"></image>
			</button>
			<!-- 有序列表 -->
			<button class="button-selectImg" @tap="handleList('ordered')">
				<image class="image-selectImg" src="../../../static/number-list.png"></image>
			</button>
			<!-- 有序列表 -->
			<button class="button-selectImg" @tap="handleList('bullet')">
				<image class="image-selectImg" src="../../../static/bullet-list.png"></image>
			</button>
		</view>
		<button class="button-next" @tap="getContent">下一步</button>

	</view>


</template>

<script>
	export default {
		data() {
			return {
				editorCtx: {},
				containerHeight: 0,
				keyboardHeight: 0,
				calcheight: 0,
				inputValue: '',
				count: 1 //设置能上传的最大数量
			}
		},
		mounted() {
			uni.onKeyboardHeightChange(res => {
				console.log(res.height)
				if (res.height === 0) {
					this.calcheight = 12
				} else {
					this.calcheight = res.height
				}
			})
		},
		methods: {
			handleList(value) {
				this.editorCtx.format("list", value)
			},
			setHeader(header) {
				this.editorCtx.format('header', header)
			},
			onEditorReady() {
				console.log('编辑器已经准备好了')
				const that = this
				const query = wx.createSelectorQuery() //创建节点查询器
				query.in(that).select('#editor').context() //选择id=editor的节点，获取节点上下文
				query.exec(function(res) {
					that.editorCtx = res[0].context
					console.log(res[0])
					console.log(res[0].context)
					console.log('初始化成功了')
				})
			},
			onEditorChange(e) {
				// 编辑器内容发生变化时触发
				console.log(e.detail.html)
				this.content = e.detail.html
			},
			saveContent() {
				// 将编辑器内容保存到服务器
				console.log(this.content)
			},
			//获取编辑器输入的内容
			getContent() {
				console.log(this.editorCtx)
				const that = this
				
				this.editorCtx.getContents({
					success: function(res) {
						console.log(res)
						console.log(res.html)
						//将文章的内容根据用户去存放到数据库里面
						//将文章的html和title作为参数传递到选择封面的页面
						uni.navigateTo({
							url: '/pages/info/selectCover/selectCover?title='+that.inputValue+'&html='+encodeURIComponent(res.html)
						})
					},
					fail: function(error) {
						console.log(error)
					}
				})

			},
			/* ---------------文字加粗--------------- */
			boldface() {
				console.log(this.editorCtx)
				this.editorCtx.format("bold")
			},
			/* ---------------上传图片--------------- */
			//选中某个头像后的操作
			chooseImg() {
				const that = this
				uni.chooseImage({
					count: that.count, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册里面选择
					success: function(res) {
						console.log(res.tempFilePaths[0])
						var uuid = new Date().getTime() + Math.random().toString(36).substr(2);
						// 图片数据
						const imageDataURI = res.tempFilePaths[0];
						// 获取最后一个"."出现的位置，将图片的后缀截取下来
						const dotIndex = imageDataURI.lastIndexOf('.');
						// 使用substring()函数从dotIndex开始截取到字符串末尾
						const extension = imageDataURI.substring(dotIndex);
						// 将图片上传至云存储空间
						wx.cloud.uploadFile({
							// 指定上传到的云路径
							cloudPath: 'articleImg/' + uuid + extension,
							// 指定要上传的文件的小程序临时文件路径
							filePath: imageDataURI,
							// 成功回调
							success: res => {
								console.log('上传成功', res)
								const fileId = res.fileID
								// 获取图片URL(imgUrl)
								wx.cloud.getTempFileURL({
									fileList: [fileId],
									success: res => {
										console.log('获取URL成功', res
											.fileList[0]
											.tempFileURL)
										const imgUrl = res.fileList[0]
											.tempFileURL
										console.log("上传完成了" + imgUrl)
										console.log(that.editorCtx)
										console.log("editorCtx")
										that.editorCtx.insertImage({
											src: imgUrl,
											width: '80%',
											// height: '500rpx',
											success: function(
												res) {
												console
													.log(
														'插入图片成功'
													)
											},
											fail: function(
												res) {
												console
													.log(
														'插入图片失败'
													)
											}
										})
									},
									fail: console.error
								})
							},
						})
					}
				})
			}
		},
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		/* background-color: white; */
	}

	.container {
		/* padding: 10px; */
	}

	.input-title {
		margin-bottom: 12rpx;
		width: 100%;
		border-top: 1px solid white;
		border-bottom: 1px solid white;
		height: 100rpx;
	}

	#editor {
		width: 100%;
		height: 100%;
	}

	.button-next {
		width: 90%;
		/* background-color: blue; */
	}

	.view-select {
		width: 100%;
		display: flex;
		margin-bottom: 24rpx;
		margin-left: 24px;
		flex-direction: row;
	}

	.button-selectImg {
		margin: 0;
		padding: 0px;
		margin-right: 24rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.image-selectImg {
		width: 60rpx;
		height: 60rpx;
	}
</style>
